vue项目部署，自动清除缓存配置

2023-07-05 22:08| 来源: 网络整理| 查看: 265

清除文件缓存 1.index.html 文件添加 http-equiv(http 响应头)

通过在head标签中添加meta，当浏览器访问index.html时，会向服务器重新请求静态资源。该方法了解即可，不推荐使用，会导致用户每次访问程序都需要重新请求服务器，所有静态资源都无法使用缓存，浪费流量，网络压力大。

// 设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。 // 设定禁止浏览器从本地机的缓存中调阅页面内容 // 清除缓存，再次访问这个网址要重新下载 2.给打包的js、css文件添加时间戳

项目打包时给js、css文件加上时间戳，保证输出的文件名不会相同，通过 vue.config.js 进行配置。(每个文件输出的名称都会在默认的基础上增加一个时间戳。这样当我们重新部署后访问的时候，由于访问的时候，文件名变了，所以会重新请求，而不是走缓存)

// 获取当前时间戳 const timeStamp = new Date().getTime() // 时间戳配置 module.exports = { // 打包后的文件输出路径 outputDir: 'dist', configureWebpack: config => { Object.assign(config,{ entry: { app: '/src/main.ts' }, // 输出重构打包编译后的js文件名称，添加时间戳 output: { ...config.output, filename: `js/[name].[hash].${timeStamp}.js`, chunkFilename: `js/[name].[hash].${timeStamp}.js`, } }); }, css: { // 输出重构打包编译后的css文件名称，添加时间戳 extract: { filename: `css/[name].[hash].${timeStamp}.css`, chunkFilename: `css/[name].[hash].${timeStamp}.css`, } } }

了解： filename：指列在 entry（入口）中，打包后输出的文件的名称 chunkFilename：指未列在 entry 中，却又需要被打包出来的文件的名称（懒加载的文件）

清除浏览器 localStorage 缓存

1、更新package.json中的 version 值，每次打包往上递增 2、main.js中，根据 version 判断是否进行缓存清理

const VUE_APP_VERSION = require('../package.json').version const vers = window.localStorage.getItem('appVersion') if(VUE_APP_VERSION != vers){ localStorage.clear() window.localStorage.setItem('appVersion', VUE_APP_VERSION) location.reload() }

【本文地址】

公司简介

联系我们